<template>
      <div class="sign-title">新用户注册</div>
      <div style="top: 55px;position: absolute;" >
        <div class="input-title">用户名：
          <input v-model="userName" class="input-contain" placeholder="请输入用户名">
        </div>
        <div class="input-title">密码：
          <input v-model="password" class="input-contain" placeholder="请输入密码">
        </div>
        <div class="input-title">手机号码：
          <input v-model="mobile" class="input-contain" placeholder="请输入手机号码">
        </div>
        <div class="input-title">出生日期: <input class="input-contain" placeholder="请输入出生日期"></div>
        <div class="input-title">手机验证码：
          <input class="input-contain" placeholder="请输入手机验证码">
          <button class="phone-check">发送验证码</button>
        </div>
        <div class="input-title">图形验证码:
          <input class="input-contain" placeholder="请输入图形验证码" style="width: 100px;left: 100px;">
          <img ref="captchaImage" :src="captchaImageUrl" class="check" @click="changeCaptcha">
        </div>
        <h5 class="router" @click="router.push('/login')">已有账号？去登录</h5>
      </div>
      <button class="button" @click="register">注册</button>
</template>
<script setup>
import router from '@/router/index';
import { ref } from 'vue';
import { signData } from './sign';
const { userName, password, mobile, register } = signData();

const timestamp = ref(Date.now());
const captchaImageUrl = ref(`http://127.0.0.1:8888/code/image?timestamp=${timestamp.value}`);

const changeCaptcha = async () => {
  try {
    // 更新时间戳，使 URL 不同
    timestamp.value = Date.now();
    // 更新图片 URL
    captchaImageUrl.value = `http://127.0.0.1:8888/code/image?timestamp=${timestamp.value}`;
  } catch (error) {
    console.error('获取新的图片验证码出错：', error);
  }
};
</script>
<style scoped>
@import './sign.scss'
</style>